<html>
<head>
	<title>Throwing 1 dice</title>
	<script>
	var cwidth = 400;
	var cheight = 300;
	var dicex = 50;
	var dicey = 50;
	var dicewidth = 100;
	var diceheight = 100;
	var dotrad = 6;
	var ctx;
	var ctx;
	var dx;
	var dy;
	var fistturn = true;
	var point;
	function throwdice6(dx,dy){
		var dx;
		var dy ;
		throwdice();
	}
	
	function throwdice(){
		var sum;
		var ch = 1+Math.floor(Math.random()*6);
		//ch = 1;
		sum = ch;
		dx = dicex;
		dy = dicey;
		drawface(ch);
		dx = dicex + 150;
		ch = 1+Math.floor(Math.random()*6);
		sum += ch;
		drawface(ch);
		dx = dx + 150;
		ch = 1+Math.floor(Math.random()*6);
		sum += ch;
		drawface(ch);
		document.f.pv.value = sum;
	}
	
	/*
	function init(){
		//var ch = 1+Math.floor(Math.random()*6);
		ch = 4;
		drawface(ch);
	}
	*/
	function drawface(n){
		ctx = document.getElementById('canvas').getContext('2d');
		ctx.lineWidth = 5;
		//ctx.clearRect(dicex,dicey,dicewidth,diceheight);
		//ctx.strokeRect(dicex,dicey,dicewidth,diceheight);
		ctx.clearRect(dx,dy,dicewidth,diceheight);
		ctx.strokeRect(dx,dy,diceheight,diceheight);
		var dotx;
		var doty;
		ctx.fillStyle = "#009966";

		switch(n){
			case 1: 
			Draw1();
			break;
			case 2:
			Draw2();
			break;
			case 3:
			Draw2();
			Draw1();
			break;
			case 4:
			Draw4();
			break;
			case 5:
			Draw4();
			Draw1();
			break;
			case 6:
			Draw4();
			Draw2mid();
			break;
		}
	}
	function Draw1(){
		var dotx ;
		var doty ;
		ctx.beginPath();
		dotx = dx+.5*dicewidth;
		doty = dy+.5*diceheight;
		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
		ctx.closePath();
		ctx.fill();
	}
	function Draw2(){
		var dotx;
		var doty;
		ctx.beginPath();
		dotx = dx + 3*dotrad;
		doty = dy + 3*dotrad;
		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
		dotx = dx+dicewidth-3*dotrad;
		doty = dy+diceheight-3*dotrad;
		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
		ctx.closePath();
		ctx.fill();
	}
	function Draw4(){
		var dotx;
		var doty;
		ctx.beginPath();
		dotx = dx + 3*dotrad;
		doty = dy + 3*dotrad;
		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
		dotx = dx+dicewidth-3*dotrad;
		doty = dy+diceheight-3*dotrad;
		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
		ctx.closePath();
		ctx.fill();
		ctx.beginPath();
		dotx = dx + 3*dotrad;
		doty = dy + diceheight-3*dotrad;
		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
		dotx = dx+ dicewidth-3*dotrad;
		doty = dy + 3*dotrad;
		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
		ctx.closePath();
		ctx.fill();
	}
	function Draw2mid(){
		var dotx;
		var doty;
		ctx.beginPath();
		dotx = dx + 3*dotrad;
		doty = dy + .5*diceheight;
		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
		dotx = dx+ dicewidth-3*dotrad;
		doty = dy+.5*diceheight;
		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
		ctx.closePath();
		ctx.fill();
	}
	
	</script>
</head>
<!--body onLoad = "init();"-->
<body>
<canvas id = "canvas" width = "500" height= "500">
Your brower does'nt support the HTML5 element canvas.
</canvas>
<br />
<button onClick="throwdice6();">Trow dice</botton>
<form name = "f">
Stage:<input name = "stage" value="First Throw"/>
Point:<input name = "pv" value= " "/>
Outcome:<input name = "outcome" value=" "/>
</form>
</body>	
</html>
